<template>
	<div style="margin-left: 5px;">
     <div>
		<div >
				<div >
					 <h3 style="display:inline-block">{{Data.CodeNum}}.</h3> <span v-html="Data.Title" style="display:inline-block"></span><el-input-number style="margin-left:10px" size="mini"  v-if="Data.TitleBlank" @change="checkItem()" :controls="false" v-model="Data.BlankValue"></el-input-number>
				    <el-button   @click="divvisibility(2)" type="text"  style="float:right" v-if="!preview">{{see}}</el-button>
                </div>
				<div class="option-area" style="margin: 5px;" v-if="visible" :v-if="show">
                    <el-table :data="tabledata" style="width: 100%">
                        <el-table-column fixed type="index" width="100" :index="GetRowTitleByIndex"></el-table-column>
                        <el-table-column  v-for="opt in columitem " :label="opt.optionId" :key="opt.optionId">
                            <template slot-scope="scope">
                             <el-checkbox v-model="opt.checkvalue[scope.$index]"  false-label="null" :true-label="tabledata[scope.$index]"><span/>
                            <el-input v-model="opt.blankvalue[scope.$index]"  style="width:100px"   size="mini"  v-if="checkBlank(opt.optionId,tabledata[scope.$index])&&(opt.checkvalue[scope.$index]===tabledata[scope.$index])"/></el-checkbox> 
                        </template>
                        </el-table-column>
                    </el-table>
				</div>
			</div>
	</div>
    
    <div id='editor' v-if='canEdit==true' style="margin: 5px;">
		<el-card class="box-card" style="margin-top:20px" >
  		  <EditorComponent v-model="Data.Title"  :Html="Data.Title"/>
		<el-row>
                <el-col :span="8">
                    <el-card >
                        
                        <div style="padding: 14px;">
                        <tr>
                            <td ><span>行标题</span></td>
                           
                        </tr>
                        <div>
                        <el-input type="textarea" @input="UpdateRowTitle" v-model="Data.RowTitleText" :rows="10" placeholder="请输入内容" ></el-input>

                        </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="16">
                    <el-card style="margin-left:10px" >
                        
                        <el-table :fit="true" :data="Data.Options" style="width: 100%">
                            <el-table-column  label="选项文字" >
                                <template slot-scope="scope">
                                    <div id='title-row' >
                                        <el-input size="small" style='display: inline-block;'  v-model="scope.row.itemName" placeholder="请输入内容"></el-input>
                                    </div>
                                    </template>
                            </el-table-column>


                                <el-table-column  label="允许填空">
                                    <template slot-scope="scope">
                                        <el-checkbox  v-model="scope.row.canFillBlank" ></el-checkbox>
                                    </template>
                                </el-table-column>

                                <el-table-column  label="操作"  >
                                        <template slot-scope="scope">
                                                <div style='display: inline-block;margin-top: 5px;'>
                                                    <el-button type="warning" @click="remove(scope.row.itemId)" size="mini" style='display: inline-block;' icon="el-icon-minus" circle></el-button>
                                                    <el-button type="danger"  @click="insert(scope.row.itemId)" size="mini" style='display: inline-block;'  icon="el-icon-plus" circle></el-button>
                                                    <el-button  size="mini" style='display: inline-block;' @click='moveUp(scope.row.itemId)' icon="el-icon-top" circle></el-button>
                                                    <el-button  size="mini" style='display: inline-block;' @click='moveDown(scope.row.itemId)' icon="el-icon-bottom" circle></el-button>
                                                </div>
                                        </template>
                                </el-table-column>



                         </el-table>
                         <BatchAddComponent v-model="msg"></BatchAddComponent>
                    </el-card>
                </el-col>
        </el-row>
							

     
	     <button @click="getanswer('1')">answer</button><el-button @click="show=!show" type="text">行列转置</el-button>
	     <el-button type="warning " style='margin-top:5px;width:100%' @click="canEdit=false">完成编辑</el-button>
		 
		 </el-card>
	     </div>
	</div>
</template>

<script lang='ts'>
import {Component, Vue, Watch, Prop } from 'vue-property-decorator';
    import TBaseQuestion from './ts/TBaseQuestion';
     import MatrixRadioSubject,{MatrixRadioOption} from './ts/MatrixRadioSelSubject';
     import { QuestionDataTypes,QuestionTypes } from './ts/QuestionDataTypes';
     import DataTypeSelector from './DataTypeSelector.vue';

     import EditorComponent from './EditorComponent.vue';
     import OrderBy,{OrderByTypes} from './ts/OrderByTypes';
    import OrderByComponent from './OderByComponent.vue';
    import MatrixRowTitle from './ts/MatrixRowTitle';
    import IndexObj from './ts/IndexObj';
    import BatchAddComponent from './BatchAddComponent.vue';
     import { Alert } from 'element-ui';
     import{Anwer}  from './ts/TQuestionSubject'
import { Option } from 'element-ui/types/rate';

    @Component(
     {
         components:{EditorComponent,DataTypeSelector,OrderByComponent,BatchAddComponent}
     }
 )
 


 // 矩阵单选组件
  export  default class MatrixMutiSelComponent  extends TBaseQuestion<MatrixRadioOption,MatrixRadioSubject> {



     
     
      public $name:string= 'MatrixMutiSelComponent';
      public canEdit=true;
      
      chose=this.getarray();
      public msg='';
      
      public gotMsg:string[]=[];
     
      public options:MatrixRadioOption[]=[];
      
      constructor() {
      super(MatrixRadioOption,MatrixRadioSubject);

      this.Data.DataType= QuestionDataTypes.dtText;
      this.Data.QuestionType=QuestionTypes.qtMatrixCheckBox;
      this.Data.Title="矩阵多选题标题";

    for(let i:number=0;i<3;i++) {
              this.Data.RowTitles.push(new MatrixRowTitle(i,'标题'+(i+1)));

          }

    this.Data.RowTitleText= this.ConvertTitleArrayToStr(this.Data.RowTitles);

    for(let i:number=0;i<5;++i) {
              const opt = new MatrixRadioOption();
              opt.itemName='选项'+i;
              for(let j:number=0;j<this.Data.RowTitles.length;j++) {
                  opt.BlankValues.push('');
              }
              this.Data.Options.push(opt);
          }



      }

    mounted()
    {
        super.mounted();
        this.initProps();
         console.info("component mounted!");
    }
       getarray(){
           let arr =  new Array(30);   //表格有10行
           for(var i = 0;i < arr.length; i++){
                arr[i] = new Array<String>(30);     //每行有10列
           }
           return arr;
       }
   @Watch('Data.RowTitles')
  watchData(newVal:Array<MatrixRowTitle>, oldVal:Array<MatrixRowTitle>) {
   
       console.log("RowTitle Changed:"+newVal);
       if(newVal==null)
       return;
     this.Data.RowTitleText=this.ConvertTitleArrayToStr(newVal);

  }
       @Watch('msg')
      public getstr() {
      console.log(this.msg);
      this.gotMsg=this.msg.split('\n');
      this.gotMsg.forEach((element) => {
        if(element!=' ') {
          const opt =new MatrixRadioOption();
          opt.itemName=element;
          this.options.push(opt);
        }
        });
     this.Data.Options=this.options;
      this.options=[];
       }

       // 获取options中每一项的name
      public getOptionText():string {
      let options=this.Data.Options[0].itemName+'\n';
      const n=this.Data.Options.length;
      for(let i=1;i<n;i++) {
        if(i<(n-1)) {
          options+=this.Data.Options[i].itemName+'\n';
        } else {
                    options+=this.Data.Options[i].itemName;
        }
      }
      return options;

    }

      // 输入框内容改变
     public inputchange() {
       this.msg=this.getOptionText();
     }
  // 删除选项
  public remove(str:string):void {
    super.remove(str);
    this.msg=this.getOptionText();
  }
       // 插入选项
    public insert(id:string):void {
        const options= this.Data.Options;
        options.splice(options.findIndex((item)=>item.itemId===id)+1,0,this.createNewOption(MatrixRadioOption));
        this.SetBlankValues();
        this.msg=this.getOptionText();
    }  // 向上移动选项
  public moveUp(id:string):void {
    super.moveUp(id);
    this.msg=this.getOptionText();
  }
  public moveDown(id:string) {
    super.moveDown(id);
    this.msg=this.getOptionText();
  }
    // 数组转为字符串
      public ConvertTitleArrayToStr(arry:MatrixRowTitle[]):string {
         const tempArray:string[]=[];
         for(const t of arry) {
             tempArray.push(t.Title);
         }

         return tempArray.join('\n');
      }

      public GetRowTitles():string {
          return this.ConvertTitleArrayToStr(this.Data.RowTitles);
      }



     public getQuestionData():any {
         return this.Data;
     }

     public setQuestionData(data:string) {

     }     // 设置填空数组的长度
    public SetBlankValues():void {

        for(const opt of this.Data.Options) {
            opt.BlankValues=[];

            for(let i=0;i<this.Data.RowTitles.length;++i) {
                opt.BlankValues.push('');
            }

        }
    }

     public getTitle():void {
        // console.info(Data.Title);
         // this.Data.Title;
   }

   public setTitle(txt:string):void {
     console.info(txt);
   }

  public GetHtml(html:string):void {
        this.Data.Title=html;
    }

    public UpdateRowTitle():void {
        const tempArray = this.Data.RowTitleText.split('\n');
        this.Data.RowTitles=[];
        let i=0;
        for(const t of tempArray) {
            this.Data.RowTitles.push(new MatrixRowTitle(i,t));
            i++;
        }
        this.SetBlankValues();
    }

    public GetRowTitleByIndex(index:number):string {
        if(this.show===true){
            return this.Data.RowTitles[index].Title;
        }else if(this.show===false){
            return this.Data.Options[index].itemName;
        }else{
            return "";
        }
        
    }
/**
 * 抽取答案
 */
     getanswer():object[]{
        let answer='';
        this.Data.answer=[];
        if(this.show){
            for(let i=0;i<this.columitem.length;i++){
                this.Data.answer[i]=this.columitem[i];
            }
        }else if(!this.show){
            this.initanswer(this.Data.RowTitles.length);
            for(let i=0;i<this.columitem.length;i++){
                this.columitem[i].checkvalue.forEach(element => {
                    if(element.length>0){
                        let num=this.Data.answer.findIndex(e=>e.optionId===element);
                        if(num>-1){
                            this.Data.answer[num].checkvalue[i]=this.columitem[i].optionId;
                            this.Data.answer[num].blankvalue[i]=this.columitem[i].blankvalue[num];
                        }
                    }        
                });
            } 
        }
        return this.Data.answer;
     }

     //行列转置
     @Watch('show')
     setdata() {
        super.setdata();
         
     }
     checkBlank(item:string,name:string){
           if(this.show){
            return this.Data.Options[this.Data.Options.findIndex(e=>e.itemName==item)].canFillBlank; 
           }
           else{
            return this.Data.Options[this.Data.Options.findIndex(e=>e.itemName==name)].canFillBlank;
           }
            
         }
         
}
</script>
 
<style>
.optionLayout{
                display: flex;
                display: -webkit-flex;
                border: 1px solid gainsboro;
                flex-flow: row wrap;
                width: 100%;
                align-items:center;
                justify-content:left;
            }
.setting-table td{  text-align: center;vertical-align:middle;} table{ width: 100%;font-size: 14px;margin-top: 5px}

</style>
